<template>
  <el-dialog title="选择分类" v-model="dialogVisible" width="45%">
    <div class="flex justify-around add-commodity">
      <div class="commodity-card-left w-[100%]">
        <el-form label-width="100px" :model="queryParams" ref="formRef" label-position="left">
          <el-row>
            <el-col :span="10">
              <el-form-item label="商品名称/ID" prop="commodityName">
                <el-input v-model="queryParams.commodityName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="20px">
                <el-button type="primary">查询</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <ContentWrap class="commodity-card">
          <div class="flex justify-between mb-20px">
            <div class="commodity-list w-[28%] h-[400px] overflow-y-auto">
              <div class="mb-20px"><span>商品分类</span></div>
              <div
                class="flex items-center mb-20px text-[#3721FF] bg-[#F7F6FF] h-[40px] px-4 rounded-lg"
              >
                <img
                  class="w-[20px] h-[20px] mr-5px"
                  src="https://img2.baidu.com/it/u=3118608147,331926958&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                  alt=""
                />
                <span>商品列表</span>
                <span>（共86个）</span>
              </div>
              <!-- 分类树 -->
              <el-tree
                :data="categoryData"
                :props="defaultProps"
                node-key="id"
                :default-expand-all="true"
                @check="handleCheck"
              >
                <template #default="{ node }">
                  <span class="custom-tree-node">{{ node.label }}</span>
                </template>
              </el-tree>
            </div>
            <!-- 商品列表 -->
            <div class="w-[70%]">
              <el-table
                :data="commodityData"
                border
                :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#333' }"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="商品ID" />
                <el-table-column prop="category" label="商品封面" />
                <el-table-column prop="name" label="商品名称" />
                <el-table-column prop="category" label="价格" />
              </el-table>
              <Pagination
                v-model:limit="queryParams.pageSize"
                v-model:page="queryParams.pageNo"
                :total="total"
                @pagination="getList"
              />
            </div>
          </div>
        </ContentWrap>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Calendar, Search } from '@element-plus/icons-vue'
const emit = defineEmits(['close'])
const props = defineProps<{
  isAddCategory: boolean
}>()
const queryParams = ref({
  pageSize: 10,
  pageNo: 1,
  commodityName: ''
})
const total = ref(0)
const getList = () => {}
const categoryData = [
  {
    id: 1,
    label: '一级 1',
    children: [
      {
        id: 4,
        label: '二级 1-1',
        children: [
          {
            id: 9,
            label: '三级 1-1-1'
          }
        ]
      }
    ]
  },
  {
    id: 2,
    label: '一级 2',
    children: [
      {
        id: 5,
        label: '二级 2-1'
      },
      {
        id: 6,
        label: '二级 2-2'
      }
    ]
  },
  {
    id: 3,
    label: '一级 3',
    children: [
      {
        id: 7,
        label: '二级 3-1'
      },
      {
        id: 8,
        label: '二级 3-2'
      }
    ]
  }
]
const defaultProps = {
  children: 'children',
  label: 'label'
}
const dialogVisible = ref(true)
const searchQuery = ref('')
const selectAll = ref(false)
const toggleSelectAll = () => {}
watch(dialogVisible, (val) => {
  if (!val) {
    emit('close')
  }
})
watch(
  () => props.isAddCategory,
  (val) => {
    dialogVisible.value = val
  }
)
</script>

<style scoped></style>
